<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<% include head.html %>
<style type="text/css">
.form-signin {
    background-color: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    margin: 0 auto 20px;
    max-width: 300px;
    padding: 19px 29px 29px;
}
</style>
</head>
<body>
	<div id="head">
		<% include top_bar.html %>
		<script type="text/javascript">$('#login').addClass('active');</script>
	</div>
	<div class="container" style="margin-top:50px;">
		<form action="/logon" method="post" class="form-signin form-horizontal" id="form1">
			<h1>登录</h1>
			<div id="alert_box" class="alert alert-error" style="display: none;"></div>
			<div class="control-group">
				<label class="control-label" style="width:60px;">LoginName：</label>
				<div class="controls" style="margin-left:80px;">
					<input type="text" id="loginname" name="loginname" placeholder="loginName"/>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" style="width:60px;">Password：</label>
				<div class="controls" style="margin-left:80px;">
					<input type="password" id="password" name="password" placeholder="password"/>
				</div>
			</div>
			<div class="control-group">
				<div class="controls" style="margin-left:80px;">
					<button type="button" id="logon_btn" class="btn btn-primary" data-loading-text="Loading...">登录</button>
				</div>
			</div>
		</form>
	</div>    
</body>
	<script type="text/javascript" src="jquery-1.7.min.js"></script>
	<script type="text/javascript" src="bootstrap.js"></script>
    <script type="text/javascript">
    	function logon(){
    		var name = $.trim($("#loginname").val());
    		var pass = $.trim($("#password").val());
    		if(name == ''){
    			show_alert("请填写账号");
	    		return;
    		}else{
    			$("#alert_box").css("display","none");
    		}
    		if(pass == ''){
    			show_alert("请填写密码");
	    		return;
    		}else{
    			$("#alert_box").css("display","none");
    		}
    		$("#form1").submit();
    	}
    	$("#logon_btn").click(function(){
    		var btn = $(this);
    		btn.button("loading");
    		logon();
    		setTimeout(function(){
    			btn.button("reset");
    		}, 1000);
    	})
    	function show_alert(content){
    		$("#alert_box").html(content);
    		$("#alert_box").css("display","block");
    	}
    </script>
</html>